<script setup>
import { ref } from 'vue'
import Modal from '@/components/Modal.vue'
import Upload from '@/components/Upload.vue'
import AntIcon from '@/components/AntdIcon/index.vue'
import { addCompanyIntroApi, updateCompanyIntroApi, deleteCompanyIntroApi } from '@/service'

const emit = defineEmits(['addCompany'])
const modalRef = ref()
const formRef = ref()
const formData = ref({
  company_intro_title: '',
  company_intro_area: '',
  company_intro_image_url: '',
  company_intro_content: '',
})

const rules = {
  company_intro_title: [{ required: true, message: '请输入标题' }],
  company_intro_area: [{ required: true, message: '请输入区域' }],
  company_intro_image_url: [{ required: true, message: '请上传图片' }],
  company_intro_content: [{ required: true, message: '请输入内容' }],
}

const upload = ({ download_url }) => {
  formData.value.company_intro_image_url = download_url
}

const submit = () => {
  const {
    id,
    company_intro_title,
    company_intro_area,
    company_intro_image_url,
    company_intro_content,
  } = formData.value
  formRef.value.validate().then(() => {
    if (id) {
      updateCompanyIntroApi({
        company_intro_id: id,
        company_intro_title,
        company_intro_area,
        company_intro_image_url,
        company_intro_content,
      }).then(() => {
        emit('addCompany')
        close()
      })
    } else {
      addCompanyIntroApi(formData.value).then(() => {
        emit('addCompany')
        close()
      })
    }
  })
}

const open = (params) => {
  if (params) {
    formData.value = params
  }
  modalRef.value.open()
}

const close = () => {
  formData.value = {
    company_intro_title: '',
    company_intro_area: '',
    company_intro_image_url: '',
    company_intro_content: '',
  }
  modalRef.value.close()
}

defineExpose({
  open,
  close,
})
</script>
<template>
  <Modal ref="modalRef" :title="formData?.id ? '编辑公司介绍' : '创建公司介绍'" @cancel="close">
    <a-form ref="formRef" :model="formData" :rules="rules" autocomplete="off">
      <a-form-item label="标题" name="company_intro_title">
        <a-input
          v-model:value="formData.company_intro_title"
          placeholder="请输入标题"
          show-count
          :maxlength="30"
        >
          <template #prefix> <AntdIcon icon="ClusterOutlined" /> </template>
        </a-input>
      </a-form-item>
      <a-form-item label="区域" name="company_intro_area">
        <a-input v-model:value="formData.company_intro_area" placeholder="请输入区域">
          <template #prefix> <AntdIcon icon="GlobalOutlined" /> </template>
        </a-input>
      </a-form-item>
      <a-form-item label="图片" name="company_intro_image_url">
        <div class="flex items-center gap-5">
          <div class="flex flex-col items-center gap-2">
            <a-image
              :width="200"
              :src="formData.company_intro_image_url"
              v-if="formData.company_intro_image_url"
            />
            <span class="text-[#999]">图片推荐尺寸: 1000*600 (5:3)</span>
          </div>
          <Upload @uploadSuccess="upload">
            <div
              class="size-20 rounded-[6px] flex items-center justify-center border border-[#eee] cursor-pointer"
            >
              <AntIcon :icon="formData?.id ? 'EditOutlined' : 'PlusOutlined'" size="20px" />
            </div>
          </Upload>
        </div>
      </a-form-item>
      <a-form-item label="内容" name="company_intro_content">
        <textarea
          class="outline-0 border border-[#eee] p-3 rounded-[6px] w-full h-35"
          v-model="formData.company_intro_content"
          placeholder="请输入内容"
        />
      </a-form-item>
      <div class="flex justify-end gap-5">
        <a-button type="primary" @click="submit">提交</a-button>
        <a-button @click="close">取消</a-button>
      </div>
    </a-form>
  </Modal>
</template>
